<template >
  <view>
    <!--顶部bar开始 -->
    <view class="cu-bar bg-white">
      <view class="action" @tap="showModal" data-target="search">
        <text class="cuIcon-searchlist text-orange"></text>查找班级
      </view>
      <view v-if="cancel" class="action" @tap="clickCancel" data-target="searchClass">
        <text class="cuIcon-roundclose text-red"></text>取消
      </view>
      <view class="action" @tap="showModal" data-target="addClass">
        <text class="cuIcon-writefill text-grey"></text>添加班级
      </view>
    </view>
    <!--顶部bar结束 -->
    <classItem :classList="classList" :cId="cId" @getClassValues="getClass()"></classItem>
    <!-- 添加班级控件开始-->
    <view class="cu-modal" :class="modalName=='addClass'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">添加班级</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <!--<view v-if="!addClassShow">-->
        <view class="cu-form-group">
          <view class="title">班级名字</view>
          <input
            placeholder="输入班级信息"
            name="input"
            :value="dataClassName"
            @input="DataClassNameChange"
          />
        </view>
        <!--<view class="cu-form-group">
					<view class="title">课程 ID</view>
					<input placeholder="  输入课程编号" name="input"></input>
        </view>-->
        <view class="cu-form-group">
          <view class="title">课程描述</view>
          <input
            placeholder="输入课程描述"
            name="input"
            :value="dataClaseDesc"
            @input="DataClassDescChange"
          />
        </view>
        <!--<view class="cu-form-group">
					<view class="title">添加学生</view>
        <input placeholder="输入学生编号" name="input"></input>-->
        <!--<studentList></studentList>
					<button class='cu-btn bg-blue shadow' 
					@tap="clickAddClass" style="margin: 20upx;">
						选择</button>
        </view>-->
        <button class="cu-btn bg-blue shadow" style="margin: 20upx;" @tap="requestClass">添加</button>
        <!--</view>-->
        <!--添加未分班学生开始 -->
        <!--<view v-if="addClassShow">
				<scroll-view  scroll-y="true" class="scroll-Y">
				<checkbox-group class="block" @change="CheckboxChange">
				<view class="cu-list menu-avatar" >
					<view class="cu-item" 
					 v-for="(item,index) in notClassUserList" :key="index">
						<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+item.avatarurl+')'}]"></view>
						<view class="content">
							<view class="text-grey">{{item.nickname}}</view>
        </view>-->
        <!--<view class="text-grey content">编号:{{item.id}}</view>-->
        <!--多选框开始 -->
        <!--<checkbox class="round blue" :value="item.openId"></checkbox>
						多选框结束 
					</view>
				</view>
				</checkbox-group>
				</scroll-view>
				<button class='cu-btn bg-blue shadow' style="margin: 20upx;"
				 @tap="clickAddUser">添加</button>
        </view>-->
        <!--添加未分班学生结束 -->
      </view>
    </view>
    <!--添加班级控件结束 -->
    <!-- 查找班级控件开始-->
    <view class="cu-modal" :class="modalName=='search'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">查找班级</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="cu-form-group">
          <view class="title">班级名字</view>
          <input
            placeholder="输入查找班级信息"
            class="uni-input"
            type="text"
            :value="data"
            @input="dataChange"
          />
        </view>

        <button class="cu-btn bg-blue shadow" style="margin: 20upx;" @tap="searchClass()">查找</button>
      </view>
    </view>
    <!--查找班级控件结束 -->
  </view>
</template>

<script>
import classItem from "./classItem/index.vue";
export default {
  components: {
    classItem
  },
  data() {
    return {
      classList: [], //班级组
      cancel: false, //顶部中间取消按键显示
      modalName: null, //触发模拟框名称
      cId: 0, //课程ID
      data: null, //班级搜索输入值
      values: null,
      dataClaseDesc: null,
      dataClassName: null
    };
  },
  methods: {
    getClass() {
      this.request({
        url: this.apiServer + "/class/findClassByCId?cId=" + this.cId
      }).then(res => {
        console.log(res);
        this.classList = res.data;
      });
    },
    showModal(e) {
      this.modalName = e.currentTarget.dataset.target;
    },
    hideModal(e) {
      this.modalName = null;
    },
    searchClass() {
      var data = this.data;
      console.log(data);
      this.modalName = null;
      if (data != null) {
        this.request({
          url: this.apiServer + "/class/findClassByShareCode?shareCode=" + data
        }).then(res => {
          console.log(res);
          if (res.msg == "操作成功!") {
            uni.showToast({
              title: "查找成功"
            });
            this.classList = [res.data];
            this.cancel = true;
          } else {
            uni.showToast({
              title: "没有这个班",
              image: "../../static/icon/error.png"
            });
          }
          this.data = null;
        });
      } else {
        uni.showToast({
          title: "请重新输入",
          image: "../../static/icon/error.png"
        });
      }
    },
    clickCancel() { //顶部取消按钮事件
      this.cancel = false;
      this.getClass();
    },
    dataChange: function(e) {
      //搜索框数据改变
      this.data = e.detail.value;
    },
    DataClassDescChange: function(e) {
      //创建班级课程描述
      this.dataClaseDesc = e.detail.value;
    },
    DataClassNameChange: function(e) {
      //创建班级课程名称
      this.dataClassName = e.detail.value;
    },
    requestClass() {
      if (this.dataClaseDesc != null && this.dataClassName != null) {
        this.request({
          url: this.apiServer + "/class/addClass",
          method: "POST",
          data: {
            cId: this.cId,
            name: this.dataClassName,
            desc: this.dataClaseDesc
          },
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        }).then(res => {
          this.modalName = null;
          this.getClass();
          if (res.code == 0) {
            uni.showToast({
              title: "添加成功"
            });
          } else {
            uni.showToast({
              title: "添加失败",
              image: "../../static/icon/error.png"
            });
          }
        });
      } else {
        uni.showToast({
          title: "添加失败",
          image: "../../static/icon/error.png"
        });
      }
    }
  },
  onLoad(option) {
    console.log(option);
    //this.id = option.id;
    this.cId = option.cId;
    this.getClass();
  }
};
</script>

<style>
.scroll-Y {
  height: 600rpx;
}
.scroll-view-item {
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}
</style>
